<template>
    <Header />
    <div class="application-info-container">
        <div class="application-info-title">
            <h1>{{ route.query.title }}</h1>
        </div>
        <h3>报名信息</h3>
        <div class="table">
            <div class="row" v-for="(item, index) in tableData" :key="index">
                <div class="col">{{ item }}</div>
            </div>
        </div>
    </div>
    <FixedMenu />
    <Footer></Footer>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'
import { getApplyInfo } from '@/api/user';

const route = useRoute()
const tableData = ref<string[]>([])
function init() {
    console.log("init")
    const { id, type } = route.query as any
    getApplyInfo(id as string, type as number).then(res => {
        const data: { name: string; value: string; }[] = JSON.parse(res.data.data.content)
        data.forEach((item) => {
            tableData.value.push(item.name + ':' + item.value)
        })
        if (tableData.value.length % 2 === 1) {
            tableData.value.push('')
        }
    })
}
onMounted(() => {
    init()
})
</script>
<style lang="scss" scoped>
.application-info-container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    h3 {
        margin: 40px 0 0 10px;
        padding-left: 10px;
        border-left: 4px solid #1890ff;
    }
    .table {
        padding: 20px 0;
        display: flex;
        flex-wrap: wrap;

        .row {
            .col {
                height: 60px;
                width: 600px;
                border-bottom: 1px solid #ccc;
                border-left: 1px solid #ccc;
                padding: 0 20px;
                line-height: 60px;
                font-size: 16px;
            }

            &:nth-child(1), &:nth-child(2){
                .col {
                    border-top: 1px solid #ccc;
                }
            }

            &:nth-child(2n) {
                .col {
                    border-right: 1px solid #ccc;

                }
            }
        }
    }
}
</style>